<template>
  <view>
    <view class="header">
      <view class="image_wrap">
        <image class="icon icon1" src="https://app.zbzedu.com/static/WaChat/img/password_bg1.png" v-if="step == 1"></image>
        <image class="icon icon2" src="https://app.zbzedu.com/static/WaChat/img/password_bg2.png" v-if="step == 2"></image>
      </view>
      <view class="nav_wrap">
        <view class="item_nav color-666" :class="{'active': step == 1}">1.验证手机号码</view>
        <view class="item_nav color-666" :class="{'active': step == 2}">2.设置新号码</view>
      </view>
    </view>
    <view class="content" :style="{height: video_height + 'px'}">
      <view v-if="step ==1">
      <u-form :model="form" ref="uForm" label-width="0">
        <u-form-item prop="name">
          <u-input type="number" v-model="form.phone" placeholder="请输入手机号" focus/>
        </u-form-item>
        <u-form-item prop="name">
          <view style="display: flex">
            <u-input v-model="inputCode" placeholder="请输入右侧验证码" style="flex: 1"/>
            <view class="color-333 code"  @click="createCode">{{checkCode}}</view>
          </view>
        </u-form-item>
        <u-form-item prop="name">
          <u-input v-model="form.smsCode" type="number" placeholder="请输入验证码"/>
          <view class="wrap" slot="right">
            <u-toast ref="uToast"></u-toast>
            <u-verification-code :seconds="seconds" ref="uCode"
            @change="codeChange"></u-verification-code>
            <view @click="getCode" class="code_btn">{{tips}}</view>
          </view>
        </u-form-item>
      </u-form>
        <view class="btn_wrp">
        <u-button @click="next_step" :custom-style="btn_background" shape="circle">下一步</u-button>
          </view>
      </view>
      <view v-else>
        <u-form :model="form" ref="uForm" label-width="0">
        <u-form-item prop="username">
          <u-input v-model="password" focus placeholder="请输入新的登录密码"/>
        </u-form-item>
        <u-form-item prop="password">
          <u-input v-model="passwordTwo" type="password" placeholder="请再次输入新的登录密码"/>
        </u-form-item>
      </u-form>
        <view class="btn_wrp">
        <u-button @click="complate" :custom-style="btn_background" shape="circle">完成</u-button>
          </view>
      </view>

    </view>
  </view>

</template>

<script>
	import {CHECK_PHONE, TOAST} from "../../util/util";
	import {request} from "../../util/api";
	import mixins from "../../pages/mixins/mixins.js";
	export default {
		mixins: [mixins],
		data() {
			return {
				step: 1,
        form: {},
        inputCode: '',
        checkCode: '',
        tips: '',
				seconds: 60,
        passwordTwo: '',
        password: ''
      }
    },

    computed: {
      video_height() {
        let info = uni.getSystemInfoSync()
        return info.windowHeight - uni.upx2px(84)
      }
    },

    mounted() {
    	this.createCode()
    },

    methods: {
			createCode() {
        var code = '';
        var codeLength = 4;
        var random = new Array('A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
          'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
        for (var i = 0; i < codeLength; i++) {
          var index = Math.floor(Math.random() * 26);
          code += random[index];
        }
        this.checkCode = code
        if (process.env.NODE_ENV == 'development') {
          this.inputCode = code
        }
      },

      // 获取验证码
			getCode() {
      	if (!CHECK_PHONE(this.form.phone)) {
          TOAST('请输入正确的手机号')
          return false;
        }
        if (this.inputCode.toUpperCase() != this.checkCode) {
        	TOAST('验证码输入错误')
				  return false;
        }
				if(this.$refs.uCode.canGetCode) {
					request({
						lodingTxt: '正在获取验证码',
            url: '/app/base/sendSms',
            data: {phone: this.form.phone}
					}).then(res => {
						this.$u.toast('验证码已发送');
						this.$refs.uCode.start();
          })
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},

      codeChange(text) {
				this.tips = text;
			},

      changeType(type) {
      	this.login_type = type
        this.form = {}
        this.createCode()
      },

      next_step() {
        let isValidate = this.checkForm()
        if (isValidate) {
        	request({
              url: '/app/base/phoneLogin',
              data: this.form
            }).then(ret => {
              var user = {};
              user.token = ret.token;
              user.mobile = this.form.phone || this.form.username;
              uni.setStorageSync(process.env.NODE_ENV + 'zbz_user', user);
              this.step = 2
              this.form = {}
            })
        }
      },

      // 表单验证
      checkForm() {
        if (!CHECK_PHONE(this.form.phone)) {
          TOAST('请输入正确的手机号')
          return false;
        }
        if (!this.form.smsCode) {
          TOAST('请输入验证码')
          return false;
        }
        if (this.inputCode.toUpperCase() != this.checkCode) {
        	TOAST('验证码输入错误')
				  return false;
        }
        return true
      },

	    complate() {
		    var that_ = this;
		    if (!that_.password) {
			    TOAST('请输入新的登录密码');
			    return false;
		    }
		    if (!that_.passwordTwo) {
			    TOAST('请再次输入新的登录密码');
			    return false;
		    }
		    if (that_.password != that_.passwordTwo) {
			    TOAST('新密码和确认密码输入不一致,请重新输入');
			    return false;
		    }
		    request({
			    url: '/app/base/resetPassword',
			    data: {
				    "password": that_.password,
				    "repassword": that_.passwordTwo,
			    },
          method: 'post'
		    }).then(res => {
            uni.removeStorageSync(process.env.NODE_ENV + 'zbz_user')
            this.$u.route({
              url: 'package/login/reset_successful',
              type: 'redirectTo'
            })
        })
	    }
    }
  }
</script>

<style lang="scss" scoped>
  $active_color: #2A6AAA;

  .header {
    height: 84upx;
    line-height: 84upx;
    position: relative;
    .image_wrap {
      position: relative;
      z-index: 1;
      .icon {
        height: 84upx;
        width: 374upx;
        position: absolute;
        top: 0;
        bottom: 0;
      }
      .icon1 {
        left: 0;
      }
      .icon2 {
        right: 0;
      }
    }
    .nav_wrap {
      display: flex;
      justify-content: space-around;
      align-items: center;
      background: #F5F5F5;
      .item_nav {
        line-height: 84upx;
        text-align: center;
        width: 50%;
        z-index: 10;
      }
      .active {
        color: #fff;
      }
    }
  }

  .code {
    font-weight: bold;
    font-size: 40upx;
    width: 120upx;
  }
  .code_btn {
    color: $active_color;
  }
  .content {
    padding: 50upx 30upx;
    box-sizing: border-box;
    position: relative;
    .btn_wrp {
      position: absolute;
      bottom: 200upx;
      left: 0;
      width: 100%;
      padding: 0 30upx;
    }
  }
</style>
